<template>
<div class="content">
    <el-dialog title="添加学校负责人" :visible.sync="dialog.dialogFormVisible1" size="tiny" :before-close="handleClose1">
        <el-form label-width="120px" class="demo-ruleForm formstyle" :rules="rules1" :model="ruleForm1" ref="ruleForm1">
            <div class="fontStyle">* 学校负责人有超级管理员权限，每所学校最多可以创建5个学校负责人。</div>
            <el-row>
                <el-col :span="21">
                    <el-form-item label="真实姓名" prop="leaderName">
                        <el-popover placement="top-start" trigger="focus" content="字符长度不大于6个">
                            <el-input v-model="ruleForm1.leaderName" placeholder="请输入负责人姓名" :maxlength="6"  slot="reference"></el-input>
                         </el-popover>   
                    </el-form-item>
                </el-col>
                <el-col :span="21">
                    <el-form-item label="手机号码" prop="phoneNumber">
                        <el-input v-model="ruleForm1.phoneNumber" placeholder="请输入号码" :maxlength="11"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="21">
                    <el-form-item label="身份证号" prop="sIdentityId">
                        <el-input v-model="ruleForm1.sIdentityId" placeholder="请输入身份证号" :maxlength="18"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm1('ruleForm1')">取消</el-button>
            <el-button type="primary" @click="submitForm1('ruleForm1')" :loading="loadingBtn">确认</el-button>
        </div>
    </el-dialog>

     <el-dialog title="负责人信息修改" :visible.sync="dialog.dialogFormVisible2" size="tiny" :before-close="handleClose2">
        <el-form label-width="120px" class="demo-ruleForm formstyle" :rules="rules2" :model="dataForm1" ref="dataForm1">
        <el-row>
            <el-col :span="21">
                <el-form-item label="真实姓名" prop="realname">
                    <el-popover placement="top-start" trigger="focus" content="字符长度不大于6个">
                        <el-input v-model="dataForm1.realname" placeholder="请输入真实姓名" :maxlength="6"  slot="reference"></el-input>
                    </el-popover>    
                </el-form-item>
            </el-col>
            <el-col :span="21">
                <el-form-item label="手机号码" prop="phoneNum">
                    <el-input v-model="dataForm1.phoneNum" placeholder="请输入手机号码" :maxlength="11"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="21">
                <el-form-item label="身份证号" prop="sIdentityIdedit">
                    <el-input v-model="dataForm1.sIdentityIdedit" placeholder="请输入身份证号" :maxlength="18"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm2('dataForm1')">取消</el-button>
            <el-button type="primary" @click="submitForm2('dataForm1')" :loading="loadingBtn2">确认</el-button>
        </div>
    </el-dialog>
   
</div>
</template>
<script>
import {saveSchoolOwner, updateSchoolOwner} from 'api/schoolManage';
import validate from '@/utils/validate';
import { mapGetters } from 'vuex';
import Cookies from 'js-cookie';
export default {
    props: {
        dialog: {
            type: Object,
            required: true
        },
        dataForm1: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            ruleForm1: {
                leaderName: '',               
                phoneNumber: '',
                sIdentityId: ''
            },
            function: {},
            loadingBtn: false,
            loadingBtn2: false,
            rules1: {
                leaderName: [
                    { required: true, message: '请输入负责人姓名', trigger: 'blur' },
                    { pattern: /^[^ ]+$/, message: '请勿输入空格', trigger: 'change'}
                ],
                phoneNumber: [...validate.phoneRequired()],
                sIdentityId: [{
                    pattern: /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/, message: '身份证号格式不对', trigger: 'blur'
                }]
            },
            rules2: {
                realname: [
                    { required: true, message: '请输入真实姓名', trigger: 'blur' },
                    { pattern: /^[^ ]+$/, message: '请勿输入空格', trigger: 'change'}
                ],
                phoneNum: [...validate.phoneRequired()],
                sIdentityIdedit: [{
                    pattern: /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/, message: '身份证号格式不对', trigger: 'blur'
                }]
            }
        }
    },
    computed: {
        ...mapGetters([
            'uid'
        ])
    },
    methods: {
        submitForm1(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.loadingBtn = true;
                    saveSchoolOwner(this.ruleForm1.phoneNumber, this.ruleForm1.leaderName, this.dataForm1.schoolId, this.ruleForm1.sIdentityId).then(response => {
                        if (response.data.status==200) {
                            this.loadingBtn = false;
                            this.$message({
                                type: 'success',
                                message: response.data.errorMsg
                            })
                            this.$refs.ruleForm1.resetFields();
                            this.$emit('addSuccess', response.data.errorMsg);
                        }
                    }).catch(() => {
                        this.loadingBtn=false;
                    });
                }
            });
        },    
        submitForm2(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.uid==this.dataForm1.id) {
                        this.$confirm('修改个人信息将会退出重新登录?', ' ', {
                            cancelButtonText: '取消',
                            confirmButtonText: '确定'
                
                        }).then(() => {
                            this.loadingBtn2 = true;
                            updateSchoolOwner(this.dataForm1.phoneNum, this.dataForm1.realname, this.dataForm1.id, this.dataForm1.sIdentityIdedit).then(response => {
                                this.loadingBtn2 = false;
                                this.$message({
                                    type: 'success',
                                    message: response.data.errorMsg
                                })
                                setTimeout(() => {
                                    Cookies.remove('uid');
                                    Cookies.remove('accessToken');
                                    Cookies.remove('userType');
                                    location.reload();
                                }, 500)
                            }).catch(() => {
                                this.loadingBtn2=false;
                            });
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消'
                            });          
                        });
                    } else {
                        this.loadingBtn2=true;
                        updateSchoolOwner(this.dataForm1.phoneNum, this.dataForm1.realname, this.dataForm1.id, this.dataForm1.sIdentityIdedit).then(response => {
                            this.loadingBtn2=false;
                            this.$message({
                                type: 'success',
                                message: response.data.errorMsg
                            })
                            this.dialog.dialogFormVisible2=false;
                            this.$emit('reviseSuccess', response.data.errorMsg);
                        }).catch(() => {
                            this.loadingBtn2=false;
                        });
                    }
                }
            });
        },
        resetForm1(formName) {
            this.$refs[formName].resetFields();
            this.dialog.dialogFormVisible1 = false
        },
        resetForm2(formName) {
            this.$refs[formName].resetFields();
            this.dialog.dialogFormVisible2 = false
        },
        handleClose1() {
            this.$refs.ruleForm1.resetFields();
            this.dialog.dialogFormVisible1 = false
        },
        handleClose2() {
            this.$refs.dataForm1.resetFields();
            this.dialog.dialogFormVisible2 = false
        }
    }
}
</script>
<style lang="scss" scoped>
    .fontStyle{
        color:#b2b2b2;
        padding-bottom:10px;
        font-size:12px;
        padding-left: 44px;
    }
    .dialog-footer{
            text-align:center;
    }
    .table{
        margin:18px 0 30px 0;
        width:100%;
        height:100%;
        border:1px solid #30B08F;
        td{
            border:1px solid #ccc;
            height:50px;
            text-align:center;
        }
        .pizhu{
            height:80px;
        }
        .addColor{
            background:#00af5b;
        }
    }
</style>
